<template>
  <div>
    <div class="box" :style="box">
      <el-input placeholder="请输入内容" v-model="input2" @input="query" :style="inputs">
        <template slot="append"><el-button type="primary" icon="el-icon-search">搜索</el-button>
        </template>
      </el-input>
      <ul v-if="data2.length != 0" :style="box">
        <li v-for="item in data2" :key="item.id"
          v-html="item.companyName.replaceAll(input2, `<span style='color:red;'>${input2}</span>`)"
          @click="showId(item.id)" class="el-icon-search">
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input2: '',
      data: [],
      data2: [],
      box: { 'width': 400 + 'px' },
      inputs: {
        "border": 'none'
      }
    };
  },
  mounted() {
    getData().then((data) => {
      this.data = data.data.rows
      console.log(this.data);
    })
  },
  methods: {
    query() {
      // 查询单个值
      this.data2 = this.data.filter(item => {
        if (this.input2 != '') {
          return item.companyName.includes(this.input2)
        }
      })
    },
    showId(e) {
      console.log(e);
    }
  },
};
</script>

<style scoped lang="scss"  >
.box {
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 2px 4px 1px rgba(0, 0, 0, .18);
  position: relative;

  ul {
    position: absolute;
    left: 0;
    margin: 0px;
    background-color: #fff;
    border-radius: 4px;

    li {
      padding: 2px 0px;
      list-style: none;
      font-size: medium;
      display: flex;
    }

    .el-icon-search:before {
      margin: 0px 15px 0px 5px;
    }
  }
}</style>
